<!--  导航菜单-->
<template>
    <div class='warp'>
        <div class="list">
            <div v-for="item in list" class="item">
                <div class="title">{{ item.name }}</div>
                <div class="menus">
                    <span class="value" v-for="menu in item.menuList">{{ menu.columnName }}</span>
                </div>
                <div class="action">
                    <a-button type="link" @click="handleEnable(item.id, item.status)">{{ item.status === 0 ? '禁用' :
                            '启用'
                    }}</a-button>
                    <a-button type="link" @click="handleShowEdit('edit', item)">编辑</a-button>
                    <a-button type="link">删除</a-button>
                </div>
            </div>
        </div>
        <MenuEdit ref="menuEdit" />
    </div>
</template>

<script>
import MenuEdit from './components/menuEdit'
import { configWebsiteNavigationBarList, configWebsiteNavigationBarEdit } from '@/api/web/web'
export default {
    components: {
        MenuEdit
    },
    data() {
        return {
            list: [],
            loading: false,
        }
    },
    computed: {},
    watch: {},
    methods: {
        handleShowEdit(type, row) {
            let data = {
                title: type === 'add' ? '新增导航' : '编辑导航',
                type,
                obj: JSON.parse(JSON.stringify(row))
            }
            this.$refs.menuEdit.show(data)
        },
        async getConfigWebsiteNavigationBarList() {
            let res = await configWebsiteNavigationBarList()
            this.list = res.data.records || []
        },
        async handleEnable(id, status) {
            var _this = this;
            let title = status === 0 ? '禁用' : '启用'
            this.$confirm({
                title,
                content: `是否确定${title}该导航菜单?`,
                onOk: async () => {
                    let { code, msg } = await configWebsiteNavigationBarEdit({ id, status: status === 1 ? 0 : 1 })
                    _this.$message[code === 0 ? 'success' : 'error'](msg)
                    if (code === 0) {
                        _this.getConfigWebsiteNavigationBarList()
                    }
                },
                onCancel() { },
            });
        },
    },
    created() {
        this.getConfigWebsiteNavigationBarList()
    },
    mounted() {

    },
}
</script>
<style scoped lang="less">
.list {
    display: flex;

    .item {
        width: 250px;
        height: 150px;
        box-shadow: 0 0 10px 10px rgba(0, 0, 0, .1);
        margin-left: 20px;
        border-radius: 20px;

        .title {
            font-size: 18px;
            margin-top: 20px;
            margin-left: 15px;
            font-weight: bold;
        }

        .menus {
            display: flex;
            flex-wrap: wrap;

            .value {
                margin-left: 15px;
                margin-top: 10px;
            }
        }

        .action {
            display: flex;
            justify-content: space-around;
            margin-top: 5px;
        }

    }
}
</style>